<template>
  <div class="login-page">
    <div class="big-img">
      <img
        src="http://pinda.itheima.net/static/img/background.902e6b43.png"
        alt=""
      />
    </div>
    <div class="right-login">
      <div class="login-box">
        <div class="title">后台登录</div>
        <el-form>
          <el-form-item>
            <el-input v-model="form.admin" size="large" :prefix-icon="User" />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.password"
              type="password"
              show-password
              size="large"
              :prefix-icon="Lock"
            />
          </el-form-item>
        </el-form>
        <button class="btn" @click="clickLogin">登录</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
// import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
type login = {
  admin: string
  password: string
}
const form = reactive<login>({
  admin: '',
  password: ''
})
const router = useRouter()
const clickLogin = () => {
  if (!form.admin || !form.password) {
    // eslint-disable-next-line no-undef
    return ElMessage.error('用户名或密码不能为空')
  }
  router.push({ name: 'homeAdmin' })
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: 20px !important;
}
:deep(.el-input__inner) {
  height: 54px;
}
:deep(.el-input__wrapper) {
  width: 463px !important;
}
.login-page {
  width: 100vw;
  height: 100vh;
  display: flex;
  .big-img {
    width: 60%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right-login {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    .login-box {
      width: 463px;
      height: 440px;
      .title {
        font-size: 36px;
        text-align: center;
        margin-bottom: 60px;
      }
      .btn {
        width: 100%;
        height: 54px;
        background-image: linear-gradient(
          to right,
          rgb(217, 46, 44),
          rgb(248, 110, 43)
        );
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
</style>
